<template>
  <div class="detail-box" ref="detailContainer">
    <div class="video-detail">
      <div class="left">
  <!--      <el-button type="info" @click="testUserInfo">测试pinia</el-button>-->
        <div class="base-info">
          <div class="title">
            {{ videoDetailData.videoTitle }}
          </div>
          <div class="danmu-count-time">
            <div class="danmu-count">
              <el-icon>
                <ChatLineSquare/>
              </el-icon>
              413
            </div>
            <div class="datetime">
              {{ videoDetailData.videoPublishTime }}
            </div>
          </div>
        </div>

        <VideoPlayComonent v-if="videoDetailData.videoId" :data="videoDetailData"></VideoPlayComonent>
        <el-divider></el-divider>
        <div class="comments-box">
          <div class="header">
            <h2>评论</h2>
            <div class="comment-count">26</div>
            <div class="order">
              <div class="hotest">最热</div>
              <el-divider direction="vertical"></el-divider>
              <div class="latest">最新</div>
            </div>
          </div>
          <div class="my-comment" v-if="currentUserId">
            <div class="above">
              <div class="avatar">
                <el-avatar :src="currentUserAvatar" :size="50"></el-avatar>
              </div>
              <div class="input">
                <el-input
                    v-model="commentFormNoTarget.content"
                    style="width: 720px"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    type="textarea"
                    placeholder="天青色等烟雨，评论区在等你"
                    @focus="isInput = true"
                />
              </div>
              <div class="at-card" v-if="hasAt">
                <div class="at-header">
                  选择或输入你想@的人
                </div>
                <div class="text">我的关注</div>
                <div class="at-list">
                  <div class="at-item" @click="setCurrentAt(item.nickname,item.userId)" v-for="item in myCareList" :key="item.userId">
                    <div class="avatar">
                      <el-avatar :src="item.userAvatar" :size="40"></el-avatar>
                    </div>
                    <div class="info">
                      <div class="name">{{ item.nickname }}</div>
                      <div class="fans-count">{{ item.fansCount }}粉丝</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="send" v-if="isInput">
              <div class="icon">
                <div class="img">
                  <el-icon>
                    <Picture/>
                  </el-icon>
                </div>
                <div class="at" @click="AtUser">
                  @
                </div>
              </div>
              <div class="publish" style="width:150px">
                <el-button @click="handleCancel()">取消</el-button>
                <el-button type="primary" @click="submitComment(false)">发布</el-button>
              </div>
            </div>
          </div>

          <div class="tip" v-else>请先登录后发表评论哦</div>
          <div class="comment-list">
            <div class="list-item" v-for="item in commentList" :key="item.commentId">
              <div class="list-item-box">
                <div class="comment-item-left">
                  <div class="avatar">
                    <el-avatar class="pointer-cover" :src="item.publisherAvatar" :size="50" @click="toSpace(item.publisherId)"></el-avatar>
                  </div>
                </div>
                <div class="comment-item-right">
                  <div class="nick-name" @click="toSpace(item.publisherId)">
                    {{ item.publisherNickname }}
                  </div>
                  <div class="content">
                    <span v-html="item.content"></span>
                  </div>
                  <div class="footer">
                    <div class="datetime">
                      {{ item.createTime }}
                    </div>
                    <div class="like">
                      <img src="/icon/no-like-icon.webp" v-if="!item.userLikeStatus" @click="doLike(item.commentId,item)" alt="" width="20">
                      <img src="/icon/has-like-icon.webp" v-else @click="doLike(item.commentId,item)" alt="" width="20">
                      {{ item.likeCount === 0 ? '' : item.likeCount }}
                    </div>
                    <div class="unlike">
                      <el-icon>
                        <Hide/>
                      </el-icon>
                    </div>
                    <div class="reply" @click="inputComment(item.commentId,item.publisherId,item.publisherNickname)">
                      回复
                    </div>
                  </div>
                  <div class="extra-chat" v-for="subItem in item.subComments" :ref="locationId === subItem.commentId?'targetEle':'' " :style="locationId === subItem.commentId ? 'background-color:#ffa8a8;':''">
                    <div class="extra-chat-left">
                      <el-avatar class="pointer-cover" :src="subItem.publisherAvatar" @click="toSpace(subItem.videoOwnerId)"></el-avatar>
                    </div>
                    <div class="extra-chat-right">
                      <div class="top">
                        <span class="replier-nickname">
                        {{ subItem.publisherNickname }}
                          &nbsp;
                        </span>
<!--                        <span class="txt" @click.prevent="inputComment(item.commentId,subItem.publisherId,subItem.publisherNickname)">回复</span>-->
                        <span class="txt">回复</span>
                        <span class="listener">
                          @{{ subItem.replyTargetNickname }}&nbsp;&nbsp;:
                        </span>
                        <span class="reply-content">
                          <span v-html="subItem.content"></span>
                        </span>
                      </div>
                      <div class="footer">
                        <div class="datetime">
                          {{ subItem.createTime }}
                        </div>
                        <div class="like">
                          <img src="/icon/no-like-icon.webp" v-if="!subItem.userLikeStatus" @click="doLike(subItem.commentId,subItem)" alt="" width="20">
                          <img src="/icon/has-like-icon.webp" v-else @click="doLike(subItem.commentId,subItem)" alt="" width="20">
                          {{ subItem.likeCount === 0 ? '' : subItem.likeCount }}
                        </div>
                        <div class="unlike">
                          <el-icon>
                            <Hide/>
                          </el-icon>
                        </div>
                        <div class="reply" @click="inputComment(item.commentId,subItem.publisherId,subItem.publisherNickname)">
                          回复
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="my-comment" v-if="showInputId === item.commentId && showInput">
                    <div class="above">
                      <div class="avatar">
                        <el-avatar :src="currentUserAvatar" :size="50"></el-avatar>
                      </div>
                      <div class="input">
                        <el-input
                            v-model="commentForm.content"
                            style="width: 620px"
                            :autosize="{ minRows: 2, maxRows: 4 }"
                            type="textarea"
                            :placeholder="'回复 @'+replyTargetName+': '"

                        />
                      </div>
                      <div class="at-card" v-if="hasSubAt">
                        <div class="at-header">
                          选择或输入你想@的人
                        </div>
                        <div class="text">我的关注</div>
                        <div class="at-list">
                          <div class="at-item" @click="setCurrentSubAt(careItem.nickname,careItem.userId)" v-for="careItem in myCareList" :key="careItem.userId">
                            <div class="avatar">
                              <el-avatar :src="careItem.userAvatar" :size="40"></el-avatar>
                            </div>
                            <div class="info">
                              <div class="name">{{ careItem.nickname }}</div>
                              <div class="fans-count">{{ careItem.fansCount }}粉丝</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="send">
                      <div class="icon">
                        <div class="img">
                          <el-icon>
                            <Picture/>
                          </el-icon>
                        </div>
                        <div class="at" @click="subAtUser   ">
                          @
                        </div>
                      </div>
                      <div class="publish">
                        <el-button @click="submitComment(true)">发布</el-button>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
              <el-divider></el-divider>
            </div>

          </div>
        </div>
      </div>
      <div class="right">
        <div class="up-info">
          <div class="up-info-left" @click="toSpace(videoDetailData.videoOwnerId)">
            <el-avatar class="pointer-cover" :src="videoDetailData.userAvatar" :size="50"></el-avatar>
          </div>
          <div class="up-info-right">
            <div class="up-nickname" @click="toSpace(videoDetailData.videoOwnerId)">
              {{ videoDetailData.videoOwnerNickname }}
            </div>
            <div class="up-profile">
              {{videoDetailData.personalSignature}}
            </div>
            <div class="follow-status">
              <el-button type="primary"  v-if="!hasCared && videoDetailData.videoOwnerId === currentUserId" style="width: 160px">
                <span>{{3.22}}万粉丝</span>
  <!--              <span v-if="videoDetailData.videoOwnerId === currentUserId">{{3.22}}万粉丝</span>-->
  <!--              <span v-else>+关注{{3.22}}万</span>-->
              </el-button>
              <el-button type="primary"  v-else-if="!hasCared" style="width: 160px" @click="careIt(videoDetailData.videoOwnerId)" >
  <!--              <span v-if="videoDetailData.videoOwnerId === currentUserId">{{3.22}}万粉丝</span>-->
  <!--              <span v-else>+关注{{3.22}}万</span>-->
                <span>+关注{{3.22}}万</span>
              </el-button>
              <el-dropdown v-else>
                <el-button type="plain" style="width: 160px">
                  <span style="color: gray" >已关注</span>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="cancelCare">取消关注</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>

            </div>
          </div>
        </div>
        <el-collapse v-model="activeNames">
          <el-collapse-item title="弹幕列表" :name="0">
            <div class="danmu-list">
              <div class="t_header">
                <el-row>
                  <el-col :span="4">
                    时间
                  </el-col>
                  <el-col :span="14">
                    弹幕内容
                  </el-col>
                  <el-col :span="6">
                    发送时间
                  </el-col>
                </el-row>
              </div>


              <div class="danmu-item-list">
                <el-row :gutter="10" v-for="item in danmakuList" :key="item.id">
                  <el-col :span="4">
               <span class="video-time">
                 {{item.playTime}}
               </span>
                  </el-col>
                  <el-col :span="14">
                    <span class="danmu-content">{{item.content}}</span>
                  </el-col>
                  <el-col :span="6">
                    <span class="send_time">{{ item.createTime }}</span>
                  </el-col>
                </el-row>


              </div>
            </div>
          </el-collapse-item>
        </el-collapse>


        <div class="next-video">
          <div class="video-item" v-for="item in videoQueue" >
            <div class="video-item-left" @click="toDetail(item.videoId)">
              <img :src="item.videoCover" width="150" alt="" >
            </div>
            <div class="video-item-right">
              <div class="video-item-title" @click="toDetail(item.videoId)">
                {{item.videoTitle}}
              </div>
              <div class="video-item-nickname" @click="toSpace(item.videoOwnerId)">
                {{ item.videoOwnerNickname }}
              </div>
              <div class="video-item-visits">
                <el-icon><VideoPlay /></el-icon>

                {{item.playCount}}
                <el-icon><ChatLineSquare /></el-icon>
                {{item.barrageCount}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script setup>

import {ChatLineSquare} from "@element-plus/icons-vue";

import {onMounted, onUnmounted, reactive, ref, watch} from "vue";
import VideoPlayComonent from "@/components/VideoPlayComonent.vue";
import {useRoute, useRouter} from "vue-router";
import {
  careUP,
  getAllCaredUser,
  getCommentListByVideoID, getDanmakuList,
  getFollowStatus,
  getPlayQueue,
  getVideoDetail,
  likeComment,
  noCare,
  publishComment,
  unLikeComment
} from "@/api/api.js";
import {useUserStore} from "@/stores/userInfoStore.js";
import {ElMessage} from "element-plus";
import {checkLoginStatus, validateCommentContent} from "@/utils/validate.js";
import emitter from "@/utils/emitter.js";
import VideoDetail from "@/views/VideoDetail.vue";

const route = useRoute()

function updateQueue(index) {
  if (index !== 0) {
    const len = videoQueue.value.length
    console.log("index的值为："+index)
    videoQueue.value = videoQueue.value.slice(index+1, len)
  }else {
    videoQueue.value.shift()
  }
}

let currentVideoId = null


/* 在挂载时*/
onMounted(async ()=>{
  const user = useUserStore().userInfo
  currentVideoId = route.params.videoId;
  if(!user.userId){ // 如果用户未登录，监听用户登录消息
    emitter.on("userInfo",async (data)=>{
      // 当用户登录后：
      // 获取
      currentUserId.value = data.userId
      currentUserAvatar.value = data.userAvatar
      // 重新查询该视频的评论，可能会获取自己的点赞状态
      const res = await getCommentListByVideoID(currentVideoId,data.userId)
      commentList.value = res.data
      await getConcernStatus()
    })
  }
  // 评论头像初始化
  currentUserAvatar.value = user.userAvatar
  // console.log(currentVideo)
  // 获取视频详情
  const res = await getVideoDetail(currentVideoId,user.userId)
  console.log(res)
  // 分割标签
  res.data.videoTag = res.data.videoTag.split(",")
  videoDetailData.value = res.data
  await handleDanmakuData(currentVideoId)
  console.log(videoDetailData.value)
  // 获取关注状态
  await getConcernStatus()
  console.log(currentVideoId)
  console.log("获取视频评论数据...")
  const res1 = await getCommentListByVideoID(currentVideoId,currentUserId.value)
  console.log(res1)
  // 跳转到此页面后，如有查找的评论内容，使其高亮
  // console.log(typeof route.query.cId) // string
  if(route.query.cId){
    locationId.value = Number(route.query.cId) // 这里有大坑，问了DeepSeek才知道，数据类型不一样 === 比较 值+类型，route.query.cId会把Number值转换成string
  }
  setTimeout(()=>{
    locationId.value = 0
  },5000);

  console.log(locationId.value)
  commentList.value = res1.data

  // 获取播放队列
  const playQueue = await getPlayQueue(currentVideoId)
  console.log(playQueue)
  videoQueue.value = playQueue.data.records
  emitter.on("getNextVideos",(fun)=>{
    // updateQueue(0);
    fun(videoQueue.value)
  })

  // 选择播放下一个视频
  emitter.on("changeNextVideo",async({nextVideoId,index})=>{
    // console.log("changeNextVideo方法的值为："+index)
    updateQueue(index);

    await router.push({
      name: 'video',
      params: {
        videoId: nextVideoId
      },
    })
    // router.addRoute({path:`/video/${nextVideoId}/`,component:VideoDetail})
    // location.reload()
    // const res = await getVideoDetail(nextVideoId,user.userId)
    // // console.log(res)
    // // 分割标签
    // res.data.videoTag = res.data.videoTag.split(",")
    // videoDetailData.value = res.data

  })

  // 评论滚动
  if(locationId.value){
    console.log(targetEle.value[0].offsetTop)
    targetEleLocation.value = targetEle.value[0].offsetTop;
    scrollToTarget()
  }

})
const locationId = ref(0)
const targetEle = ref(null)
const targetEleLocation = ref()
const detailContainer = ref();
// 强制滚动
const scrollToTarget = () => {
  // console.log("到目标位置")
  const container = detailContainer.value
  // console.log(container)
  // console.log(container.scrollTop)
  // console.log(container.scrollHeight)
  if (container) {
    container.scrollTo({
      top:targetEleLocation.value,
      behavior:"smooth"
    })
  }
}

// 当前登录的用户id
const currentUserId = ref(useUserStore().userInfo.userId)

/* 关注开始 */
const getConcernStatus = async () => {
  const userId = useUserStore().userInfo.userId
  if(!userId){
    hasCared.value = false
    return
  }
  console.log(videoDetailData.value)
  const upId = videoDetailData.value.videoOwnerId
  const res = await getFollowStatus(upId,userId);
  console.log(res);
  if(res.data){
    hasCared.value = true
  }else{
    hasCared.value = false
  }
}
onMounted(async ()=>{
  emitter.on("latestDanmaku",(data)=>{
    data.createTime = getDateTime(data.createTime)
    data.createTime = data.createTime.toString().replace("T",' ')
    data.playTime = numberToTime(data.playTime)
    danmakuList.value.push(data)
  })
})
const hasCared = ref()
const currentUser = useUserStore().userInfo
const form = reactive({
  fansId:0,
  upId:0
})
const careIt = async (userId) => {
  form.fansId = currentUser.userId
  form.upId = userId
  const res = await careUP(form)
  console.log(res)
  if(res.code === 200){
    hasCared.value = true
  }
}


const cancelCare = async () => {
  form.fansId = currentUser.userId
  form.upId = videoDetailData.value.videoOwnerId
  const res = await noCare(form)
  console.log(res)
  if(res.code === 200){
    hasCared.value = false
  }
}

/* 关注结束*/


const videoDetailData = ref({})


/* 右侧播放队列列表相关 */
const videoQueue = ref([
  // {
  //   videoId:1,
  //   videoCover: '/img/recommendVideoList/video01.png',
  //   videoTitle: '哪款车你将来能成为不出去玩测晚餐我就看从哪里看出那可能错八错尽快把尽快帮我去揭开dcacadscawec',
  //   videoOwnerId:1,
  //   nickname:'黑马程序员',
  //   playCount: 123,
  //   barrageCount:1
  // }, {
  //   videoId: 2,
  //   videoCover: '/img/recommendVideoList/video02.png',
  //   videoTitle: '哪款车你将来能成为不出去玩测晚餐我就看从哪里看出那可能错八错尽快把尽快帮我去揭开dcacadscawec',
  //   videoOwnerId:1,
  //   nickname:'黑马程序员',
  //   playCount: 123,
  //   barrageCount:1
  // }
])

const toDetail = async (videoId)=>{
  window.open('/video/'+videoId+'/',"_blank")
  // router.push("/")
}

// 点击跳转
const router = useRouter()
const toSpace = (id) => {
  console.log(id)
  // router.push({
  //   // path:"/space/home",
  //   name:'home',
  //   params:{
  //     userId:id
  //   }
  // })
  window.open("/space/home/"+id,"_blank")
}

/* 弹幕相关 */
const activeNames = ref(1)
// 弹幕相关
// 计算弹幕竖直方向的位置
function getRandomNumber(min, max) {
  let value = Math.floor(Math.random() * (max - min + 1)) + min;
  console.log("值为:" + value)
  return value
}

// 数据
const danmakuList = ref([
  {
    id: 1,
    videoId: 0,
    userId: 12,
    content: '',
    color: '',
    size: 0,
    position:'',
    playTime:0.0,
    likeCount:0,
    createTime:''
  }
])


async function handleDanmakuData(videoId){
  const res = await getDanmakuList(videoId)
  console.log(res)
  danmakuList.value = res.data
  danmakuList.value.forEach(ele=>{
    ele.createTime = getDateTime(ele.createTime)
    ele.playTime = numberToTime(ele.playTime)
  })
}
function numberToTime(num){
  return `${Math.floor(num/60)}:${num%60 > 10 ? num%60 : '0'+num%60}`
}

function getDateTime(dateStr){
  // const date = new Date(dateStr)
  // return `${date.getMonth()}`
  return dateStr.substring(5,dateStr.length-3)
}
/* 弹幕相关结束 */
// 评论相关

/*评论相关*/
const currentUserAvatar = ref()
const isInput = ref(false)

// 上面的输入框的事件

const useStore = useUserStore()
const commentFormNoTarget = ref({
  atNickname:[],
  atUserId:[],
  replyTargetId: 0,
  parentCommentId: 0,
  targetCommentId:0,
  sourceContentId: route.query.videoId,
  content: '',
  publisherNickname:'',
  publisherAvatar:'',
  replyTargetNickname:'',
})
const commentForm = ref({
  atNickname:[],
  atUserId:[],
  replyTargetId: 0,
  parentCommentId: 0,
  targetCommentId:0,
  sourceContentId: route.query.videoId,
  content: '',
  publisherNickname:'',
  publisherAvatar:'',
  replyTargetNickname:'',
})
// 控制输入框的显示
const showInput = ref(false)
const showInputId = ref()
const replyTargetName = ref('')
const inputComment = (parentId,publisherId,publisherNickname) => {

  // 判断登录状态
  if(!checkLoginStatus()){
    emitter.emit("showLogin")
    return;
  }
  console.log(111)
  showInput.value = !showInput.value
  showInputId.value = parentId
  replyTargetName.value = publisherNickname
  if(showInput.value){
    commentForm.value.targetCommentId = parentId
    commentForm.value.parentCommentId = parentId
    commentForm.value.replyTargetId = publisherId
    commentForm.value.replyTargetNickname = publisherNickname
  }
}

const handleCancel = () => {
  showInput.value = false;
  commentFormNoTarget.value.content = ""
  hasAt.value = false
}
const submitComment = async (subComment) => {
  console.log("开始执行提交评论")
  const uI = useUserStore().userInfo
  commentForm.value.publisherNickname = uI.nickname
  commentForm.value.publisherAvatar = uI.userAvatar
  commentFormNoTarget.value.publisherNickname = uI.nickname
  commentFormNoTarget.value.publisherAvatar = uI.userAvatar
  if(subComment === true){
    if(!validateCommentContent(commentForm.value.content)){
      return
    }
    const res = await publishComment(commentForm.value)
    console.log(res)
  }else {
    if(!validateCommentContent(commentFormNoTarget.value.content)){
      return
    }
    const res = await publishComment(commentFormNoTarget.value)
    console.log(res)
  }
  commentForm.value.content = ''
  commentFormNoTarget.value.content = ''
  getCommentListByVideoID(route.query.videoId)
      .then(res => {
        console.log(res.data)
    commentList.value = res.data
  })
}

const commentList = ref([])


/* 评论点赞相关*/
const likeForm = {
  supporterId: 0,
  likeContentId:0,
  contentOwnerId:0
}

// 点赞
const doLike = async (id,item) => {
  const userId = useUserStore().userInfo.userId
  console.log(item.publisherId === userId)
  if(item.publisherId === userId){ // 自己不能给自己点赞
    return;
  }
  likeForm.supporterId = userId
  likeForm.likeContentId = id
  likeForm.contentOwnerId = item.publisherId
  const res = await likeComment(likeForm)
  if(res.code === 200){
    if(res.msg.includes("取消")){
      ElMessage.success(res.msg);
      item.userLikeStatus = 0;
      item.likeCount --
      return;
    }
    item.userLikeStatus = 1;
    item.likeCount ++
    ElMessage.success("点赞成功！")
  }
}



// 点赞状态

/* @相关 */
watch(()=>commentFormNoTarget.value.content,async (newValue,oldValue)=>{
  console.log('content变化了',newValue,oldValue)
  if(newValue.includes("@")){
    console.log("包含有@值")
    hasAt.value = true
    const res = await getAllCaredUser(1,100);
    myCareList.value = res.data.records
  }
  else{
    hasAt.value = false
  }
},{deep:true})

watch(()=>commentForm.value.content,async (newValue,oldValue)=>{
  console.log('content变化了',newValue,oldValue)
  if(newValue.includes("@")){
    console.log("包含有@值")
    hasSubAt.value = true
    const res = await getAllCaredUser(1,100);
    myCareList.value = res.data.records
  }else{
    hasSubAt.value = false
  }
},{deep:true})

const hasAt = ref(false)
const hasSubAt = ref(false)

// 获取我的关注列表
const myCareList = ref()

/**
 * 设置当前@人
 * @param nickname
 * @param userId
 */
const setCurrentAt = (nickname,userId) => {
  console.log(nickname)
  commentFormNoTarget.value.atUserId.push(userId)
  commentFormNoTarget.value.atNickname.push(nickname)
  commentFormNoTarget.value.content+=nickname
  setTimeout(()=>{
    hasAt.value = false
  },10)
  console.log(hasAt.value)
}
const setCurrentSubAt = (nickname,userId) => {
  console.log(nickname)
  commentForm.value.atUserId.push(userId)
  commentForm.value.atNickname.push(nickname)
  commentForm.value.content+=nickname
  setTimeout(()=>{
    hasSubAt.value = false
  },10)
  console.log(hasSubAt.value)
}

const AtUser = () => {
  commentFormNoTarget.value.content += '@'
}
const subAtUser = () => {
  commentForm.value.content += '@'
}
/* @相关结束 */

</script>
<style lang="scss" scoped>

.detail-box{
  width: 100%;
  height: 650px;
  overflow-y: scroll;
}
.video-detail {
  width: 1200px;

  margin: 0 auto;
  //overflow: hidden;
  //overflow-y: auto;
  //background-color: #c1ffcc;
  display: flex;
  box-sizing: border-box;

  .left {
    box-sizing: border-box;
    width: 800px;
    min-height: 200px;
    //background-color: #55d8ff;

    .base-info {
      height: 80px;
      //background-color: #ffc9c9;

      .title {
        font-size: 20px;
        height: 30px;
        line-height: 30px;
      }

      .danmu-count-time {
        width: 200px;
        height: 30px;
        font-size: 12px;
        color: gray;
        display: flex;
        align-items: center;

        .danmu-count {
          width: 80px;
          height: 30px;
          line-height: 30px;
        }

        .datetime {
          width: 300px;
          height: 30px;
          line-height: 30px;
        }
      }
    }

    // region
    //.video-play{
    //  width:800px;
    //  height: 1000px;
    //  position: relative;
    //  //.danmu{
    //  //  position: absolute;
    //  //  left: 800px;
    //  //  top: 20px;
    //  //  color: white;
    //  //}
    //
    //}
    .comments-box {
      .header {
        display: flex;
        height: 50px;
        line-height: 50px;

        .comment-count {
          margin-left: 10px;
          width: 60px;
          color: gray;

          font-size: 13px;
        }

        .order {
          color: gray;
          width: 100px;
          display: flex;
          font-size: 13px;

          .el-divider--vertical {
            top: 20px;
          }

          .hotest, .latest {
            width: 40px;
            padding: 0 5px;
            cursor: pointer;
          }
        }
      }

      .tip{
        box-sizing: border-box;
        margin: 10px 60px;
        background-color: var(--subject-color--);
        border-radius: 8px;
        width: 80%;
        height: 60px;
        color: #002dff;
        line-height: 60px;
        text-align: center;
      }
      .my-comment {
        min-height: 60px;
        //background-color: #ff9c9c;
        display: flex;
        flex-direction: column;

        .above {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          box-sizing: border-box;
          padding-left: 15px;
          position: relative;
          .input{
          }
          .at-card{
            box-sizing: border-box;
            border-radius: 5px;
            padding: 10px;
            z-index:100;
            //display: none;
            width: 250px;
            height: 400px;
            background-color: white;
            box-shadow: 0 0 5px 0 gray;
            position: absolute;
            left: 80px;
            top: 80px;
            .at-header{
              height: 30px;
              color: var(--gray-font-color--);
              font-size: 13px;
              line-height: 30px;
            }
            .text{
              height: 20px;
              line-height: 20px;
              font-size: 13px;
              color: var(--gray-font-color--);
            }
            .at-list{
              height: 320px;
              box-sizing: border-box;
              padding: 10px;
              width: 100%;
              overflow-y: auto;
              .at-item{
                display: flex;
                cursor: pointer;
                .avatar{
                  display: flex;
                  width: 40px;
                  height: 40px;
                  margin-right: 10px;
                  align-items: center;
                }
                .info{
                  font-size: 13px;
                  color: var(--gray-font-color--);
                  .name{
                    height: 20px;
                    line-height: 20px;
                  }
                  .fans-count{
                    height: 20px;
                    line-height: 20px;
                  }
                }
              }


            }
          }
          .avatar {
            width: 60px;
            margin-right: 15px;
          }
        }

        .send {
          box-sizing: border-box;
          padding-left: 60px;
          height: 50px;
          display: flex;
          justify-content: space-between;

          .icon {
            width: 50px;
            display: flex;
            justify-content: space-around;

            .img, .at {
              cursor: pointer;
            }
          }

          .publish {
            width: 70px;
            box-sizing: border-box;
          }
        }
      }

      .comment-list {

        .list-item {
          //display: flex;
          min-height: 100px;
          padding: 20px 0;

          .list-item-box {
            display: flex;

            .comment-item-left {
              box-sizing: border-box;
              width: 80px;

              .avatar {
                padding: 0 15px;
              }
            }

            .comment-item-right {
              .nick-name {
                cursor: pointer;
                height: 30px;
                font-size: 13px;
                width: 300px;
                color: gray;
              }

              .content {
                min-height: 30px;
                font-size: 14px;
                //width: 720px;
              }

              .footer {
                height: 30px;
                line-height: 30px;
                display: flex;
                color: gray;
                font-size: 13px;

                .datetime {
                  width: 150px;
                }

                .like, .unlike, .reply {
                  cursor: pointer;
                  width: 50px;
                  line-height: 30px;

                }

              }

              .extra-chat {
                display: flex;
                min-height: 30px;

                .extra-chat-left {
                  width: 50px;
                  box-sizing: border-box;
                  padding: 5px;
                }

                .extra-chat-right {
                  box-sizing: border-box;
                  width: 670px;
                  //background-color: #ff9c9c;
                  padding: 10px 5px;

                  .top {
                    .replier-nickname {
                      color: gray;
                      font-size: 13px;
                    }

                    .reply-content {
                      font-size: 14px;
                    }
                  }

                  //.extra-footer{
                  //
                  //}
                }
              }
            }

          }
        }
      }
    }
  }

  .right {
    box-sizing: border-box;
    width: 450px;
    min-height: 100px;
    //background-color: #ff33cf;
    padding-left: 30px;

    .up-info {
      display: flex;

      .up-info-left {
        width: 60px;
        //background-color: red;
        box-sizing: border-box;
        padding-top: 10px;
      }

      .up-info-right {
        .up-nickname {
          cursor: pointer;
        }

        .up-profile {
          color: gray;
          font-size: 13px;
        }

        .follow-status {
          margin-top: 6px;
          display: flex;
          justify-content: center;
        }
      }
    }
    .video-danmu{
      width: 360px;
      height: 40px;
      box-sizing: border-box;
      padding: 10px 0;
      //line-height: 40px;
      border-radius: 8px;
      background-color: #eee;
      margin-top: 20px;
      display: flex;
      position: relative;
      .arrow{
        position: absolute;
        right: 20px;
        top: 10px;
      }
      .danmu-text{
        padding:0 20px;
      }
    }
    .danmu-list{
      .t_header{
        color: gray;
        font-size: 13px;
      }
      .danmu-item-list{
        .send_time,.danmu-content,.video-time,{
          color: gray;
          font-size: 13px;
        }
        .danmu-content{
          color: black;
        }
      }
    }
    .next-video{
      margin-top: 20px;
      .video-item{
        margin: 15px 0;
        display: flex;
        height: 75px;
        .video-item-left{
          width: 150px;
          border-radius: 5px;
          overflow: hidden;
          //background-color: blue;
        }
        .video-item-right{
          width: 230px;
          box-sizing: border-box;
          padding-left: 10px;
          //background-color: #fa00ff;
          .video-item-title{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient: vertical;

          }
          .video-item-nickname{
            cursor: pointer;
            color: gray;
            font-size: 13px;
          }
          .video-item-visits{
            color: gray;
            font-size: 13px;
            height: 20px;
            line-height: 20px;
          }
        }
      }
    }
  }
}

.pointer-cover{
  cursor: pointer;

}
.pointer-active{
  background-color: #0b44c7;
  color: #065fd4;
}

:deep(.el-collapse-item__header){
  background-color: #efefef;
  height: 40px;
  border-radius: 10px;
  padding: 10px 20px;
  box-sizing: border-box;
  font-size: 13px;
  width: 360px;
}
</style>


<!--<div class="video-danmu">-->
<!--<div class="danmu-text">弹幕列表</div>-->
<!--<el-icon><MoreFilled /></el-icon>-->
<!--<div class="arrow">-->
<!--  <el-icon><ArrowDown /></el-icon>-->
<!--</div>-->
<!--</div>-->